const app = getApp()

Page({
  data: {
    latitude: 23.096994,
    longitude: 113.324520,
    markers: [],
    clubItem: null,
    customCalloutMarkerIds: [],
    num: 1
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
    const clubItem = app.globalData.clubdata
    this.clubItem = clubItem
    this.latitude = clubItem.latitude
    this.longitude = clubItem.lontitude
    const customMark = {
      id: 5,
      latitude:  this.latitude,
      longitude: this.longitude,
      iconPath: '/public/img/7-1.png',
      callout: {
        content: clubItem.address,
        color: '#000000',
        fontSize: 14,
        borderWidth: 1,
        borderRadius: 10,
        borderColor: '#000000',
        bgColor: '#fff',
        padding: 5,
        display: 'ALWAYS',
        textAlign: 'center'
      },
    }
    const markers=[customMark]
    this.marker=markers
    this.setData({
      latitude:this.latitude,
      longitude:this.longitude,
      markers,
      clubItem
    })

  },

  addMarker() {
    const markers = this.marker
    this.setData({
      markers,
      customCalloutMarkerIds: [5],
    })
  },

  removeMarker() {
    this.setData({
      markers: [],
      customCalloutMarkerIds: []
    })
  },

  changeMarkerId() {
    const customCalloutMarkerIds = this.data.customCalloutMarkerIds.slice()
    const top = customCalloutMarkerIds.shift()
    customCalloutMarkerIds.push(top)

    this.setData({
      customCalloutMarkerIds
    })
  },
  markertap(e) {
    console.log('@@@ markertap', e)
  },
  callouttap(e) {
    console.log('@@@ callouttap', e)
  },
  labeltap(e) {
    console.log('@@@ labeltap', e)
  },
  translateMarker: function () {
    const length = this.data.markers.length
    if (length === 0) return

    const index = Math.floor(Math.random() * length)
    const markers = this.data.markers
    const marker = markers[index]
    marker.latitude = marker.latitude + 0.002
    marker.longitude = marker.longitude + 0.002
    const that = this
    this.mapCtx.translateMarker({
      markerId: marker.id,
      duration: 1000,
      destination: {
        latitude: marker.latitude,
        longitude: marker.longitude
      },
      animationEnd() {
        that.setData({markers})
        console.log('animation end')
      },
      complete(res) {
        console.log('translateMarker', res)
      }
    })
  },
  changeContent() {
    const num = Math.floor(Math.random() * 10)
    this.setData({num})
  }
})
